<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               :page.sync="page"
               v-model="startForm">
      <template slot-scope="scope" slot="menuForm">
        <el-button type="primary" icon="el-icon-check"
                   size="small"
                   plain
                   v-if="getBtnPermission('testDataSource',form,null,false)"
                   @click="handleTestDataSource">
          测试连接
        </el-button>
      </template>
      <template slot="url" slot-scope="{type,size,row}">
        <el-popover v-if="row.url"
                    placement="top-start"
                    title="详情"
                    trigger="hover"
                    :content="row.url">
          <el-button type="text" slot="reference">{{ row.url.length < 10 ? row.url : row.url.substring(0, 10) }}
          </el-button>
        </el-popover>
        <div v-else>未配置</div>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {createStartMixin} from "@/mixins/start-crud.js"
import {testDataSource} from "@/api/start/dataSourceApi";
const option={
  name: "start/dataSource",
  isTreeData: false,
  permissionBtn: {testDataSource: 'start:dataSource::testDataSource'},
  permissionBtnHandler: {},
}
export default {
  mixins: [createStartMixin(option)],
  methods: {
    handleTestDataSource() {
      let refForm = this.$refs.crud.$refs.dialogForm.$refs.tableForm.$refs.form;
      refForm.validate((vaild, done) => {
        if (!vaild) return
        testDataSource(this.form).then(res => {
          this.$message({
            message: '数据源获取成功',
            type: 'success'
          });
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
